<template>
  <div class="arrival-notice-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="通知单编号">
          <el-input v-model="searchForm.noticeCode" placeholder="请输入通知单编号"></el-input>
        </el-form-item>
        <el-form-item label="通知单名称">
          <el-input v-model="searchForm.noticeName" placeholder="请输入通知单名称"></el-input>
        </el-form-item>
        <el-form-item label="采购订单编号">
          <el-input v-model="searchForm.purchaseOrderCode" placeholder="请输入采购订单编号"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchForm.supplierCode" placeholder="请输入供应商编码"></el-input>
        </el-form-item>
        <el-form-item label="到货日期">
          <el-date-picker 
            v-model="searchForm.deliveryDate" 
            type="date" 
            placeholder="选择预期到货日期"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-area">
      <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
      <el-button type="success" :icon="Edit" @click="handleEdit">修改</el-button>
      <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="noticeCode"
        label="通知单编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="noticeName"
        label="通知单名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="purchaseOrderCode"
        label="采购订单编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="supplierName"
        label="供应商名称">
      </el-table-column>
      <el-table-column
        prop="contactPerson"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="deliveryDate"
        label="到货日期"
        width="100">
        <template #default="scope">
          {{ scope.row.deliveryDate ? scope.row.deliveryDate.substring(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="单据状态"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-area">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pagination.pageIndex"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogFormVisible"
      width="1200px"
      top="5vh"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      class="custom-dialog">
      <div class="dialog-header">
        {{ dialogTitle }}
        <div class="date-info">日期：{{ currentDate }}</div>
      </div>
      
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="arrivalNoticeFormRef" 
        label-width="120px"
        class="custom-form">
        
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="通知单编号" prop="noticeCode">
              <el-input 
                v-model="form.noticeCode" 
                :disabled="isEdit || autoGenerateCode" 
                placeholder="请输入入库单编号"
                class="input-with-button">
                <template #append>
                  <el-button 
                    size="small"
                    type="primary" 
                    :disabled="isEdit"
                    class="auto-btn"
                    @click="autoGenerateCode = !autoGenerateCode">
                    {{ autoGenerateCode ? '手动输入' : '自动生成' }}
                  </el-button>
                </template>
              </el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="通知单名称" prop="noticeName">
          <el-input v-model="form.noticeName" placeholder="请输入通知单名称"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="采购订单编号" prop="purchaseOrderCode">
          <el-input v-model="form.purchaseOrderCode" placeholder="请输入采购订单编号"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="供应商" prop="supplierCode">
              <div class="supplier-select">
                <el-input 
                  v-model="form.supplierName" 
                  placeholder="请选择供应商" 
                  readonly
                  class="select-input">
                  <template #suffix>
                    <el-icon @click="openSupplierDialog"><ArrowDown /></el-icon>
                  </template>
                </el-input>
                <el-button 
                  type="primary" 
                  @click="openSupplierDialog"
                  class="select-btn">
                  选择供应商
                </el-button>
              </div>
              <input type="hidden" v-model="form.supplierCode">
        </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="到货日期" prop="deliveryDate">
          <el-date-picker
            v-model="form.deliveryDate"
            type="date"
            placeholder="选择到货日期"
            value-format="YYYY-MM-DD"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-model="form.contactPerson" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注" prop="remark">
          <el-input 
            type="textarea" 
            v-model="form.remark" 
            placeholder="请输入内容" 
            :rows="4"
            resize="none"></el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelForm" class="footer-btn cancel-btn">取 消</el-button>
          <el-button type="primary" @click="submitForm" class="footer-btn save-btn">保 存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 供应商选择对话框 -->
    <el-dialog
      v-model="supplierDialogVisible"
      width="1800px"
      top="5vh"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      class="custom-dialog">
      <div class="dialog-header">
        供应商选择
      </div>
      
      <div class="supplier-search-area">
        <el-form :model="supplierSearchForm" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="供应商编码">
                <el-input 
                  v-model="supplierSearchForm.supplierCode" 
                  placeholder="请输入供应商编码"
                  size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商名称">
                <el-input 
                  v-model="supplierSearchForm.supplierName" 
                  placeholder="请输入供应商名称"
                  size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商简称">
                <el-input 
                  v-model="supplierSearchForm.supplierReferred" 
                  placeholder="请输入供应商简称"
                  size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="英文名称">
                <el-input 
                  v-model="supplierSearchForm.supplierEngName" 
                  placeholder="请输入供应商英文名称"
                  size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否启用">
                <el-select 
                  v-model="supplierSearchForm.isLock" 
                  placeholder="请选择" 
                  size="small"
                  style="width: 100%">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="启用" :value="0"></el-option>
                  <el-option label="禁用" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="search-buttons">
              <el-button 
                type="primary" 
                @click="searchSuppliers" 
                icon="Search"
                size="small">搜索</el-button>
              <el-button 
                @click="resetSupplierSearch" 
                icon="Refresh"
                size="small">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="supplier-table-wrapper">
        <el-table
          :data="supplierTableData"
          border
          height="400px"
          @row-click="handleSupplierRowClick"
          highlight-current-row
          class="custom-table">
          <el-table-column
            type="radio"
            width="50">
            <template #default="scope">
              <el-radio v-model="selectedSupplierId" :label="scope.row.id">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="supplierCode"
            label="供应商编码"
            width="120"
            align="center"></el-table-column>
          <el-table-column
            prop="supplierName"
            label="供应商名称"
            width="180"
            align="center"></el-table-column>
          <el-table-column
            prop="supplierReferred"
            label="供应商简称"
            width="120"
            align="center"></el-table-column>
          <el-table-column
            prop="supplierRating"
            label="供应商等级"
            width="100"
            align="center"></el-table-column>
          <el-table-column
            prop="supplierRating"
            label="供应商评分"
            width="100"
            align="center"></el-table-column>
          <el-table-column
            prop="supplierPhone"
            label="供应商电话"
            width="120"
            align="center"></el-table-column>
          <el-table-column
            prop="isLock"
            label="是否启用"
            width="80"
            align="center">
            <template #default="scope">
              <el-tag 
                size="small"
                :type="scope.row.isLock === 0 ? 'success' : 'danger'">
                {{ scope.row.isLock === 0 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"></el-table-column>
        </el-table>
        
        <div class="supplier-pagination-area">
          <span class="total-count">共 {{ supplierPagination.total }} 条</span>
          <el-pagination
            @size-change="handleSupplierSizeChange"
            @current-change="handleSupplierCurrentChange"
            v-model:current-page="supplierPagination.pageIndex"
            v-model:page-size="supplierPagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="sizes, prev, pager, next, jumper"
            :total="supplierPagination.total"></el-pagination>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="supplierDialogVisible = false" class="footer-btn cancel-btn">取 消</el-button>
          <el-button type="primary" @click="confirmSelectSupplier" class="footer-btn save-btn">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Search, Refresh, ArrowDown } from '@element-plus/icons-vue'
import http from '@/api/http'

// 添加当前日期计算
const currentDate = ref(new Date().toLocaleDateString());

// 在script最顶部声明整个组件
const dialogTitle = ref('添加到货通知单');

// 表格数据
const tableData = ref([])
// 多选选中的行
const multipleSelection = ref([])

// 搜索表单
const searchForm = reactive({
  noticeCode: '',
  noticeName: '',
  purchaseOrderCode: '',
  supplierCode: '',
  deliveryDate: ''
})

// 分页
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

// 表单对话框
const dialogFormVisible = ref(false)
const isEdit = ref(false)
const autoGenerateCode = ref(true)

// 表单数据
const form = reactive({
  id: 0,
  noticeCode: '',
  noticeName: '',
  purchaseOrderCode: '',
  supplierCode: '',
  supplierName: '',
  contactPerson: '',
  phone: '',
  deliveryDate: '',
  remark: ''
})

// 供应商选项
const supplierOptions = ref([])

// 供应商选择对话框相关
const supplierDialogVisible = ref(false)
const supplierTableData = ref([])
const selectedSupplierId = ref(null)
const supplierSearchForm = reactive({
  supplierCode: '',
  supplierName: '',
  supplierReferred: '',
  supplierEngName: '',
  isLock: null
})
const supplierPagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

// 表单验证规则
const rules = {
  noticeCode: [
    { required: true, message: '请输入通知单编号', trigger: 'blur' }
  ],
  noticeName: [
    { required: true, message: '请输入通知单名称', trigger: 'blur' }
  ],
  supplierCode: [
    { required: true, message: '请选择供应商', trigger: 'change' }
  ],
  deliveryDate: [
    { required: true, message: '请选择到货日期', trigger: 'change' }
  ]
}

// 表单引用
const arrivalNoticeFormRef = ref(null)

// 生命周期钩子
onMounted(() => {
  // 获取供应商选项
  getSupplierOptions()
  // 获取表格数据
  getTableData()
})

// 获取供应商选项
const getSupplierOptions = async () => {
  try {
    // 使用URL拼接参数
    const url = `/api/MasterData/GetSupplierList?pageIndex=1&pageSize=100&IsLock=0`;
    const response = await http.get(url);
    
    if (response && response.data && Array.isArray(response.data)) {
      // 转换供应商数据格式为 {code: xx, name: xx} 格式
      supplierOptions.value = response.data.map(item => ({
        code: item.supplierCode || '',
        name: item.supplierName || ''
      }));
    } else {
      supplierOptions.value = [];
      ElMessage.error('获取供应商选项失败');
    }
  } catch (error) {
    ElMessage.error('获取供应商选项失败');
    console.error(error);
  }
}

// 获取表格数据
const getTableData = async () => {
  
    const params = {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
      noticeCode: searchForm.noticeCode || null,
      noticeName: searchForm.noticeName || null,
      purchaseOrderCode: searchForm.purchaseOrderCode || null,
      supplierCode: searchForm.supplierCode || null,
      deliveryDate: searchForm.deliveryDate || null
    }
    const response = await http.post('/api/ArrivalNotice/GetList/GetArrivalNoticeList', params)
    console.log(response);
    
    // 直接使用返回的rows数组和total值
    tableData.value = response.rows || []
    pagination.total = response.total || 0

}

// 搜索
const handleSearch = () => {
  pagination.pageIndex = 1
  getTableData()
}

// 重置搜索表单
const resetSearchForm = () => {
  Object.assign(searchForm, {
    noticeCode: '',
    noticeName: '',
    purchaseOrderCode: '',
    supplierCode: '',
    deliveryDate: ''
  })
  handleSearch()
}

// 处理表格选择变化
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 生成自动编号
const generateAutoCode = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  return `AN${year}${month}${day}${hours}${minutes}${seconds}`
}

// 处理自动生成编号开关变化
const handleAutoCodeChange = (val) => {
  if (val) {
    form.noticeCode = generateAutoCode()
  } else {
    form.noticeCode = ''
  }
}

// 处理添加
const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '添加到货通知单'
  resetForm()
  autoGenerateCode.value = true
  
  // 生成自动编号
  if (autoGenerateCode.value) {
    form.noticeCode = generateAutoCode()
  }
  
  dialogFormVisible.value = true
  
  // 重置表单校验状态
  nextTick(() => {
    if (arrivalNoticeFormRef.value) {
      arrivalNoticeFormRef.value.resetFields()
    }
  })
}

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    id: 0,
    noticeCode: '',
    noticeName: '',
    purchaseOrderCode: '',
    supplierCode: '',
    supplierName: '',
    contactPerson: '',
    phone: '',
    deliveryDate: '',
    remark: ''
  })
}

// 取消表单
const cancelForm = () => {
  dialogFormVisible.value = false
  resetForm()
}

// 处理编辑
const handleEdit = (index, row) => {
  if (!row && multipleSelection.value.length !== 1) {
    ElMessage.warning('请选择一条记录进行编辑')
    return
  }
  
  const currentRow = row || multipleSelection.value[0]
  isEdit.value = true
  dialogTitle.value = '编辑到货通知单'
  
  // 适配后端返回的数据结构
  Object.assign(form, {
    id: currentRow.id || 0,
    noticeCode: currentRow.noticeCode || '',
    noticeName: currentRow.noticeName || '',
    purchaseOrderCode: currentRow.purchaseOrderCode || '',
    supplierCode: currentRow.supplierCode || '',
    supplierName: currentRow.supplierName || '',
    contactPerson: currentRow.contactPerson || '',
    phone: currentRow.phone || '',
    // 处理日期格式
    deliveryDate: currentRow.deliveryDate ? currentRow.deliveryDate.substring(0, 10) : '',
    remark: currentRow.remark || ''
  })
  
  autoGenerateCode.value = false
  dialogFormVisible.value = true
  
  // 重置表单校验状态
  nextTick(() => {
    if (arrivalNoticeFormRef.value) {
      arrivalNoticeFormRef.value.resetFields()
    }
  })
}

// 处理删除
const handleDelete = async (index, row) => {
  try {
    await ElMessageBox.confirm('确认删除该到货通知单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const ids = row ? [row.id] : multipleSelection.value.map(item => item.id)
    if (ids.length === 0) {
      ElMessage.warning('请至少选择一条记录')
      return
    }
    
    // 将ID数组转换为逗号分隔的字符串
    const idString = ids.join(',')
    
    const response = await http.post(`/api/ArrivalNotice/DelShipments?ids=${idString}`)
    
    if (response && response.status) {
      ElMessage.success('删除成功')
      getTableData()
    } else {
      ElMessage.error(response?.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
      console.error(error)
    }
  }
}

// 提交表单
const submitForm = () => {
  arrivalNoticeFormRef.value.validate(async (valid) => {
    if (valid) {
      console.log(form);
      
      try {
        let response
        
        if (isEdit.value) {
          console.log(form);
          response = await http.post('/api/ArrivalNotice/Update/UpdateArrivalNotice', form)
        } else {
          // 如果选择自动生成编码，则提交生成的编码
          const submitData = { ...form }
          if (autoGenerateCode.value) {
            submitData.noticeCode = form.noticeCode
          }
          response = await http.post('/api/ArrivalNotice/Add/AddArrivalNotice', submitData)
        }
        
        if (response && response.status ) {
          ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
          dialogFormVisible.value = false
          resetForm()
          getTableData()
        } else {
          ElMessage.error(response?.msg || (isEdit.value ? '更新失败' : '添加失败'))
        }
      } catch (error) {
        ElMessage.error(isEdit.value ? '更新失败' : '添加失败')
        console.error(error)
      }
    } else {
      return false
    }
  })
}

// 处理每页显示条数变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  getTableData()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  pagination.pageIndex = val
  getTableData()
}

// 打开供应商选择对话框
const openSupplierDialog = () => {
  supplierDialogVisible.value = true
  // 重置搜索条件和分页
  resetSupplierSearch()
  // 获取供应商数据
  getSupplierList()
}

// 获取供应商列表
const getSupplierList = async () => {
  try {
    // 构建URL参数
    let url = `/api/MasterData/GetSupplierList?pageIndex=${supplierPagination.pageIndex}&pageSize=${supplierPagination.pageSize}`;
    
    // 添加条件参数
    if (supplierSearchForm.supplierCode) {
      url += `&SupplierCode=${encodeURIComponent(supplierSearchForm.supplierCode)}`;
    }
    if (supplierSearchForm.supplierName) {
      url += `&SupplierName=${encodeURIComponent(supplierSearchForm.supplierName)}`;
    }
    if (supplierSearchForm.supplierReferred) {
      url += `&SupplierReferred=${encodeURIComponent(supplierSearchForm.supplierReferred)}`;
    }
    if (supplierSearchForm.supplierEngName) {
      url += `&SupplierEngName=${encodeURIComponent(supplierSearchForm.supplierEngName)}`;
    }
    if (supplierSearchForm.isLock !== null) {
      url += `&IsLock=${supplierSearchForm.isLock}`;
    }
    
    console.log("查询URL:", url);
    const response = await http.get(url);
    
    // 调试输出
    console.log("查询响应:", response);
    
    if (response && response.data) {
      // 从response.data中获取数据
      supplierTableData.value = response.data || [];
      supplierPagination.total = response.totalCount || 0;
    } else {
      ElMessage.error('获取供应商列表失败');
      supplierTableData.value = [];
      supplierPagination.total = 0;
    }
    
  } catch (error) {
    console.error('获取供应商列表失败', error);
    ElMessage.error('获取供应商列表失败');
    supplierTableData.value = [];
    supplierPagination.total = 0;
  }
}

// 搜索供应商
const searchSuppliers = () => {
  supplierPagination.pageIndex = 1
  getSupplierList()
}

// 重置供应商搜索
const resetSupplierSearch = () => {
  Object.assign(supplierSearchForm, {
    supplierCode: '',
    supplierName: '',
    supplierReferred: '',
    supplierEngName: '',
    isLock: null
  })
  supplierPagination.pageIndex = 1
  getSupplierList()
}

// 选择供应商
const selectSupplier = (row) => {
  form.supplierCode = row.supplierCode;
  form.supplierName = row.supplierName;
  
  // 如果有联系人电话字段，也进行填充
  if (row.contactPerson) {
    form.contactPerson = row.contactPerson;
  }
  if (row.phone || row.supplierPhone) {
    form.phone = row.phone || row.supplierPhone;
  }
  
  supplierDialogVisible.value = false;
}

// 确认选择供应商
const confirmSelectSupplier = () => {
  if (!selectedSupplierId.value) {
    ElMessage.warning('请选择一个供应商');
    return;
  }
  
  const selectedSupplier = supplierTableData.value.find(item => item.id === selectedSupplierId.value);
  if (selectedSupplier) {
    selectSupplier(selectedSupplier);
  }
}

// 处理供应商表格行点击
const handleSupplierRowClick = (row) => {
  selectedSupplierId.value = row.id;
}

// 处理供应商分页大小变化
const handleSupplierSizeChange = (val) => {
  supplierPagination.pageSize = val
  getSupplierList()
}

// 处理供应商当前页变化
const handleSupplierCurrentChange = (val) => {
  supplierPagination.pageIndex = val
  getSupplierList()
}

</script>

<style scoped>
.arrival-notice-container {
  padding: 20px;
}
.search-area {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.operation-area {
  margin-bottom: 20px;
}
.pagination-area {
  margin-top: 20px;
  text-align: right;
}
.auto-code-switch {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.switch-label {
  margin-right: 10px;
  font-size: 14px;
  color: #606266;
}
:deep(.el-dialog) {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
:deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  border-radius: 8px 8px 0 0;
}
:deep(.el-dialog__body) {
  padding: 25px 20px;
}
:deep(.el-dialog__footer) {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
  border-radius: 0 0 8px 8px;
}
:deep(.el-form-item) {
  margin-bottom: 22px;
}

/* 供应商选择对话框相关样式 */
.supplier-search-area {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.supplier-pagination-area {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.search-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
:deep(.el-radio) {
  margin-right: 0;
  display: flex;
  justify-content: center;
}
.dialog-footer {
  text-align: center;
  margin-top: 10px;
}
/* 通用对话框样式 */
.custom-dialog {
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.dialog-header {
  padding: 16px 20px;
  background-color: #409eff;
  color: white;
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  position: relative;
}

.dialog-header .date-info {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 500;
}

.custom-form {
  padding: 20px;
  background-color: #f8fafc;
}

/* 表单样式调整 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #333;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-input__wrapper) {
  border-radius: 4px !important;
}

/* 供应商选择样式 */
.supplier-select {
  display: flex;
}

.select-input {
  flex: 1;
}

.select-input :deep(.el-input__wrapper) {
  border-radius: 4px 0 0 4px !important;
}

.select-input :deep(.el-input__suffix) {
  cursor: pointer;
  padding-right: 10px;
}

.select-btn {
  border-radius: 0 4px 4px 0;
  padding: 12px 15px;
}

/* 带按钮的输入框样式 */
.input-with-button :deep(.el-input-group__append) {
  padding: 0;
  border: none;
}

.auto-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 供应商搜索区域 */
.supplier-search-area {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 15px;
}

.supplier-search-area :deep(.el-form-item) {
  margin-bottom: 15px;
}

.search-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 5px;
}

/* 供应商表格容器 */
.supplier-table-wrapper {
  margin-top: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.custom-table {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

.custom-table :deep(th) {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 600;
}

.supplier-pagination-area {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
}

.total-count {
  font-size: 14px;
  color: #606266;
}

/* 底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0 15px;
}

.footer-btn {
  padding: 10px 32px;
  border-radius: 4px;
  font-size: 14px;
}

.cancel-btn {
  border: 1px solid #dcdfe6;
  color: #606266;
  background: white;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.save-btn {
  background: linear-gradient(135deg, #3a8ffe 0%, #3d7afd 100%);
  border: none;
}

.save-btn:hover {
  background: linear-gradient(135deg, #5da1ff 0%, #5389fc 100%);
}

</style>
